<template>
  <div class="goods-video-box">
    <goods-top-box>
      <template v-slot:left-one>{{ title }}</template>
      <template v-slot:right-one>
        <div @mouseenter="getMouseEvents(true,index)" @mouseleave="getMouseEvents(false,index)" ref="rightMessage"
             v-for="(item,index) in oneGoodsTopBoxRight">
          {{ item }}
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="symbolOne[index]"></use>
          </svg>
        </div>
      </template>
    </goods-top-box>
    <div class="goods-video-items-box">
      <goods-video-item v-for="video in allVideo" :video="video"></goods-video-item>
    </div>
  </div>
</template>
<script>
import GoodsTopBox from "@/components/Mi/Common/GoodsTopBox";
import GoodsVideoItem from "@/components/Mi/Common/GoodsVideoItem";

export default {
  components: {
    GoodsTopBox,
    GoodsVideoItem,
  },
  name: "GoodsVideo",
  data() {
    return {
      allVideo: [],
      title: '',
      oneGoodsTopBoxRight: ['查看全部'],
      symbolOne: ['#icon-right'],
    }
  },
  created() {
    this.getAllVideo()
  },
  methods: {
    async getAllVideo() {
      const {data: res} = await this.$http.get('mivideo')
      this.title = res.title
      this.allVideo = res.videos
      console.log(this.title)
      console.log(this.allVideo)
    },
    getMouseEvents(flag, index) {//goods右侧信息变色
      let mouseEvents = this.$refs.rightMessage[index]
      console.log(mouseEvents)
      if (flag === true) {
        mouseEvents.setAttribute('style', 'color: #ED702F;')
      } else {
        mouseEvents.setAttribute('style', '')
      }
    },
  },
}
</script>

<style scoped lang="less">
.goods-video-items-box {
  display: flex;
  justify-content: space-between;
}
</style>
